﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <!-- Reset css -->
    <link href="../css/yui/reset-min.css" rel="stylesheet" type="text/css" />
    <link href="../css/yui/base-min.css" rel="stylesheet" type="text/css" />
    <!-- Website css -->
    <link href="../css/webjies.website.css" rel="stylesheet" type="text/css" />

    <!-- Raphael -->
    <script type="text/javascript" src="../js/raphael-min.js"></script>
    <script type="text/javascript" src="../js/raphael.zoom.js"></script>

    <!-- JQuery (required for webjies.api.js) -->
    <script type="text/javascript" src="../js/jquery-1.6.1.min.js"></script>
    <!-- JQuery Json plugin -->
    <script type="text/javascript" src="../js/jquery.json-2.2.min.js"></script>
    <!-- JQuery ContextMenu plugin -->
    <script type="text/javascript" src="../js/jquery.contextmenu.js"></script> 
    <link href="../css/jquery.contextMenu.css" rel="stylesheet" type="text/css" />

    <!-- JQuery UI  (with: Core, Widget, Position, Dialog) (required by webjies.ui.js) -->
    <script type="text/javascript" src="../js/jquery-ui-1.8.13.custom.min.js"></script>
    <link href="../css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css" />

    <!-- JQuery template plugin -->
    <script type="text/javascript" src="../js/jquery.tmpl-beta1.min.js"></script>

    <!-- JQuery datalink plugin -->
    <script type="text/javascript" src="../js/jquery.datalink-beta1.min.js"></script>

    <!-- WebJies API -->
    <script type="text/javascript" src="../js/webjies.api.js"></script>

    <!-- JQuery mousewheel -->
    <script type="text/javascript" src="../js/jquery.mousewheel.js"></script>

    <!-- WebJies UI -->
    <script type="text/javascript" src="../js/webjies.ui.js"></script>
    <link href="../css/webjies.ui.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">

//{
//	"Description":"String content",
//	"ID":"String content",
//	"Title":"String content",
//	"Nodes":[{
//		"ID":"String content",
//		"Position":2147483647,
//		"Title":"String content",
//		"URL":"String content",
//		"URLs":[{
//			"ID":"String content",
//			"URL":"String content"
//		}]
//	}],
//	"Tags":"String content"
//}

        function jieObj(nodesArray, ID, title, description) {
            this.ID = ID;
            this.Title = title;
            this.Description = description;
            this.Nodes = nodesArray;
        }
        function nodeObj(urlArray, ID, title) {
            this.ID = ID;
            this.Title = title;
            this.URLs = urlArray;
            this.commCoord = [];
        }
        function urlObj(url, ID, title, currVis, imagePath) {
            this.ID = ID;
            this.Title = title;
            this.URL = url;
            this.currVis = currVis;
            this.commCoord = [];
            this.imagePath = imagePath;
        }
        function addbutton_click() {
            var jie = jQuery.parseJSON($('#jsonTextArea').val());

            map.addJie(jie);

            return false;
        }
        function clearbutton_click() {
            map.clear();

            return false;
        }
    </script>
</head>

<body>
    <!--<div style="background-color:red;height:500px;width:400px;position:relative;overflow:hidden;">
        <div id="canvas_container" style="height:400px;width:400px;position:absolute;top:10px;left:200px;">
        </div> 
    </div>-->
    <div id="canvas_container" style="height:600px;width:800px;">
    </div> 

    <form action="#" style="float:right;">
        <!--<textarea id="jsonTextArea" rows="99" cols="99" style="width:300px;height:200px;"></textarea>
        <button onclick="return addbutton_click()">Add</button>
        <button onclick="return clearbutton_click()">Clear</button>-->
    </form>

    <script type="text/javascript">
        var counter = 101;

        var url001 = new urlObj('http://www.alskdjfhg0001.com/', counter++, "TitleURL001", 50, "YouTubeLogo.gif");
        var url002 = new urlObj('http://www.alskdjfhg0001.com/', counter++, "TitleURL002", 500, "YouTubeLogo.gif");
        var url003 = new urlObj('http://www.alskdjfhg0003.com/', counter++, "TitleURL003", 500000, "YouTubeLogo.gif");
        var url004 = new urlObj('http://www.alskdjfhg0004.com/', counter++, "TitleURL004", 5000, "YouTubeLogo.gif");
        var url005 = new urlObj('http://www.alskdjfhg0005.com/', counter++, "TitleURL005", 9000, "AmazonLogo.gif");
        var url006 = new urlObj('http://www.alskdjfhg0006.com/', counter++, "TitleURL006", 5000, "FlickrLogo.gif");
        var url007 = new urlObj('http://www.alskdjfhg0007.com/', counter++, "TitleURL007", 1000, "BlogSpotLogo.gif");
        var url008 = new urlObj('http://www.alskdjfhg0008.com/', counter++, "TitleURL008", 200000, "BlogSpotLogo.gif");
        var url009 = new urlObj('http://www.alskdjfhg0009.com/', counter++, "TitleURL009", 50, "BlogSpotLogo.gif");
        var url010 = new urlObj('http://www.alskdjfhg0010.com/', counter++, "TitleURL010", 3,"WikipediaLogo.gif");
        var url011 = new urlObj('http://www.alskdjfhg0011.com/', counter++, "TitleURL001", 50, "WikipediaLogo.gif");
        var url012 = new urlObj('http://www.alskdjfhg0012.com/', counter++, "TitleURL002", 500, "WikipediaLogo.gif");
        var url013 = new urlObj('http://www.alskdjfhg0013.com/', counter++, "TitleURL003", 500, "WikipediaLogo.gif");
        var url014 = new urlObj('http://www.alskdjfhg0014.com/', counter++, "TitleURL004", 5000, "TwitterLogo.gif");
        var url015 = new urlObj('http://www.alskdjfhg0015.com/', counter++, "TitleURL005", 9000, "TwitterLogo.gif");
        var url016 = new urlObj('http://www.alskdjfhg0016.com/', counter++, "TitleURL006", 60, "TwitterLogo.gif");
        var url017 = new urlObj('http://www.alskdjfhg0017.com/', counter++, "TitleURL007", 1000);
        var url018 = new urlObj('http://www.alskdjfhg0018.com/', counter++, "TitleURL008", 20);
        var url019 = new urlObj('http://www.alskdjfhg0019.com/', counter++, "TitleURL009", 50);
        var url020 = new urlObj('http://www.alskdjfhg0020.com/', counter++, "TitleURL010", 3);

        var node001 = new nodeObj([url001], counter++, "TitleNode001");
        var node002 = new nodeObj([url002, url003], counter++, "TitleNode002");
        var node003 = new nodeObj([url002, url003, url004], counter++, "TitleNode003");
        var node004 = new nodeObj([url001], counter++, "TitleNode004");

        var node005 = new nodeObj([url017, url017, url017], counter++, "TitleNode005");
        var node006 = new nodeObj([url017], counter++, "TitleNode005");
        var node007 = new nodeObj([url017], counter++, "TitleNode005");

        var node008 = new nodeObj([url007], counter++, "TitleNode006");
        var node009 = new nodeObj([url003,url006], counter++, "TitleNode007");
        var node010 = new nodeObj([url017], counter++, "TitleNode008");
        var node011 = new nodeObj([url014,url015,url016], counter++, "TitleNode009");
        var node012 = new nodeObj([url007, url008], counter++, "TitleNode010");
        var node013 = new nodeObj([url001, url004], counter++, "TitleNode010");

        var node014 = new nodeObj([url004, url002, url001], counter++, "TitleNode010");
        var node015 = new nodeObj([url007, url008], counter++, "TitleNode003");

        var node016 = new nodeObj([url017,url018,url012], counter++, "TitleNode004");
        var node017 = new nodeObj([url019], counter++, "TitleNode005");
        var node018 = new nodeObj([url013], counter++, "TitleNode006");

        var node019 = new nodeObj([url006, url006, url006, url006, url006, url006], counter++, "TitleNode009");

        var node020 = new nodeObj([url010], counter++, "TitleNode010");
        var node021 = new nodeObj([url011], counter++, "TitleNode010");
        var node022 = new nodeObj([url012], counter++, "TitleNode010");
        var node023 = new nodeObj([url020], counter++, "TitleNode009");

        var node024 = new nodeObj([url006, url006], counter++, "TitleNode010");
        var node025 = new nodeObj([url004, url004, url002], counter++, "TitleNode010");

        var jie001 = new jieObj([node001, node002, node003, node004], counter++, "Best Madonna concerts", "DescriptionJie0001 DescriptionJie0001 DescriptionJie0001 DescriptionJie0001 DescriptionJie0001 DescriptionJie0001");
        var jie002 = new jieObj([node005, node006, node007], counter++, "New Jie", "DescriptionJie0002 DescriptionJie0002 DescriptionJie0002 DescriptionJie0002 DescriptionJie0002 DescriptionJie0002 ");
        var jie003 = new jieObj([node008, node009, node010, node011, node012], counter++, "My tribute to Madonna", "DescriptionJie0003 DescriptionJie0003 DescriptionJie0003 DescriptionJie0003 DescriptionJie0003 DescriptionJie0003 DescriptionJie0003 ");
        var jie004 = new jieObj([node004, node014, node015], counter++, "Re-invention tour videos", "DescriptionJie0004 DescriptionJie0004 DescriptionJie0004 DescriptionJie0004 DescriptionJie0004 DescriptionJie0004 DescriptionJie0004 "); 
        var jie005 = new jieObj([node016, node017, node018], counter++, "La Madonna di San Genaro", "DescriptionJie0001 DescriptionJie0001 DescriptionJie0001 DescriptionJie0001 DescriptionJie0001 DescriptionJie0001");
        
        var jie006 = new jieObj([node019], counter++, "Best pics of madonna", "DescriptionJie0002 DescriptionJie0002 DescriptionJie0002 DescriptionJie0002 DescriptionJie0002 DescriptionJie0002 ");
        var jie007 = new jieObj([node020, node018, node022, node023], counter++, "Buonos aires stadium", "DescriptionJie0003 DescriptionJie0003 DescriptionJie0003 DescriptionJie0003 DescriptionJie0003 DescriptionJie0003 DescriptionJie0003 ");
        var jie008 = new jieObj([node009,node024, node025,node013], counter++, "Guy richie", "DescriptionJie0004 DescriptionJie0004 DescriptionJie0004 DescriptionJie0004 DescriptionJie0004 DescriptionJie0004 DescriptionJie0004 "); 
        
        $('#jsonTextArea').val(jQuery.toJSON(jie001));

        var map = new webjies.map($('#canvas_container'));

        map.loadJies([jie001, jie002, jie003]);

    </script>
</body>
</html>

